<template>
  <div>
    <!--html布局-->
    <!--工具类-->
<!--    <Row>-->

<!--      <i-col span="24" class-name="y_query_right">-->

<!--      </i-col>-->
<!--    </Row>-->


    <Row>
      <i-col span="24" class-name="y_query_right">
        <Select v-model="param.type" placeholder="请选择类型" class="y_condition" style="text-align: left;" clearable>
          <Option v-for="item in sizeTypes" :value="item.value">{{ item.name }}</Option>
        </Select>
        <Button type="primary" icon="md-search" class="y_condition" @click="search">查询</Button>

        <Button type="primary" icon="md-add" class="y_condition" @click="showAddSysSize" v-has=tRole.PRODUCT_4_100>新增
        </Button>
      </i-col>
    </Row>

    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
      <template v-if="sysSizeList.length == 0">
        <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
      </template>
      <list-item class="list_item" v-for="(item,index) in sysSizeList">
        <div style="width:100%;padding: 0 0.5rem;"  >
          <Row type="flex" justify="space-between">
            <i-col flex="auto" style="text-align: left" >

              <KeyValueView>#{{index+1}}</KeyValueView>
              <KeyValueView v-if="sizeTypes.filter(i=>i.value==item.type).length>0" title="类型">{{sizeTypes.filter(i=>i.value==item.type)[0].name}}</KeyValueView>
              <KeyValueView title="名称" >{{item.name}}</KeyValueView>
              <KeyValueView  title="顺序" >{{ item.sequence}}</KeyValueView>
            </i-col>
            <i-col>
              <Button ghost size="small" icon="md-create" type="primary" @click="showModifySysSize(index)" style="margin-right: 0.5rem">编辑</Button>
              <Button ghost size="small" icon="md-trash" type="error"  @click="showDelSysSizeModal(index)" >删除</Button>
            </i-col>
          </Row>
        </div>
      </list-item>
    </List>

    <!--表格和分页-->
<!--    <Table stripe border class="base_table" ref="selection"-->
<!--           :columns="tableTitles" :data="sysSizeList"-->
<!--           no-data-text="暂无数据"></Table>-->

    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange"
            show-sizer show-elevator/>
    </div>

    <!--尺寸定义 弹出框-->
    <Modal title="系统尺码定义" v-model="status.modalModify.isShow" :model="param.paramSysSize"
           :mask-closable="false"
           :loading="status.modalModify.isLoading"
           @on-ok="saveSysSize"
           ok-text="保存"
           :styles="{top: '20px',bottom:'20px'}" >
      <Form ref="paramSysSize" :model="param.paramSysSize" :label-width="120"
            class="modal_form" :rules="vlidation">

          <Row>
            <i-col span="22">
              <FormItem label="尺码类型 :" prop="type">
                <Select placeholder="请选择类型" v-model="param.paramSysSize.type" >
                  <Option v-for="item in sizeTypes" :value="item.value">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="22">
              <FormItem label="尺码名 :" prop="name">
                <Input v-model.trim="param.paramSysSize.name"  style="width: 100%"
                       class="modal_form_input"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row v-if="status.modalAction.isAdd === false">
            <i-col span="22">
              <FormItem label="顺序 :" prop="sequence">
                <Input v-model.trim="param.paramSysSize.sequence" placeholder="顺序数字越小越靠前" style="width: 100%" class="modal_form_input" number></Input>
              </FormItem>
            </i-col>
          </Row>


      </Form>
    </Modal>

    <!--消息弹出框-->
    <Modal
      v-model="status.modalAction.isShow"
      title="确认删除"
      :loading="status.modalAction.isLoading"
      @on-ok="deleteSysSize">
      <br><p>{{status.modalAction.content}}?</p>
      <br>
    </Modal>
  </div>
</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/sysSize/sys_size_data"
  import KeyValueView from "../widgets/KeyValueView";
  import {
    init,
    webList,
    showSysSize,
    saveSysSize,
    showDelSysSizeModal,
    deleteSysSize
  } from "./js/sysSize/sys_size_funs"

  export default {
    components: {ICol,KeyValueView},
    data() {
      return {
        tRole:{
          PRODUCT_4_100: "PRODUCT-4-100"
        },
        page: tiyData.tPage,
        sysSizeList: tiyData.tData.sysSizeList,
        sizeTypes: this.$yFreeze(this.$store.getters.dictionaries.sysSizeTypeDict),//尺码类型
        status:tiyData.tStatus,
        tableTitles: this.$yFreeze(tiyData.tTable(this)),
        param: tiyData.tParam,
        // role: tiyData.tRole,
        // status: tiyData.tStatus,
        vlidation: tiyData.tStatus.vlidation,
      }
    },
    computed : {

    },
    methods: {

      changePage(page) {
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p) {
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      close() {
        this.status.modalModify.isShow = false;
      },
      search(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      showAddSysSize() {
        showSysSize(this, tiyData, true, 0);
      },
      showModifySysSize(index) {
        showSysSize(this, tiyData, false, index);
      },
      saveSysSize(){
        saveSysSize(this, tiyData, 'paramSysSize');
      },
      showDelSysSizeModal(index){
        showDelSysSizeModal(this, tiyData, index);
      },
      deleteSysSize(){
        deleteSysSize(this, tiyData);
      }
    },
    mounted() {
      init(this, tiyData);
    }
  }
</script>

<!--css样式-->
<style lang="less" scoped>
@import  (once,optional) "../css/base";

  .operation_item {
    text-align: left;
    margin-right: 20px;
  }

  .modal_form {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_form_input {
    width: 200px;
    margin-right: 10px;
  }

  .form_step {
    width: 160px;
  }

  .modal_div {
    text-align: left;
    margin-top: 20px;
    padding: 20px;
    border: dotted thin #d1d1d1
  }

  .modal_div_title {
    text-align: left;
    margin-bottom: 10px
  }

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}

</style>
